/**
 * iPaper.css
 * by Lin Ye
 */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td, menu{margin:0;padding:0;}
html{}
body,button,input,select,textarea{ font:12px/1.5 "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;}
iframe{border:0;margin:0;padding:0;}
img, fieldset{border:0;}
cite,em,strong,th{font-style:inherit;font-weight:inherit;}
h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal;}
input,button,textarea,select{*font-size:100%;}
ol, ul, menu{list-style:none;}
input, button{border:0;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:left;}
blockquote{quotes:none;}
blockquote:before,blockquote:after,{content:'';content:none;}
a{text-decoration:none;}
td,th,div{ display:block; word-break:break-all;word-wrap:break-word}
pre,xmp{white-space:pre-wrap}
form{display:inline;}
input{vertical-align:middle;}
em,cite,i{font-style:normal;}
s{text-decoration:none;}
*{outline:none}
:focus{outline:0;}
.clear{clear:both;}
/*css3*/
.br10{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.br5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.br-b10{ -moz-border-radius-bottomleft: 7px;-moz-border-radius-bottomright: 7px;-webkit-border-bottom-left-radius: 7px;-webkit-border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px; } 
.br-t10{ -moz-border-radius-topleft: 7px;-moz-border-radius-topright: 7px;-webkit-border-top-left-radius: 7px;-webkit-border-top-right-radius: 7px;border-top-left-radius: 7px;border-top-right-radius: 7px; } 

@font-face{
    font-family: 'iconic';
    src: url(../font/iconic_stroke-webfont.eot);
}
@font-face {
    font-family: 'iconic';
    src: url(../font/iconic_stroke-webfont.ttf);
}

/*main*/
body { font-family: 'PT Sans', sans-serif; background:#FFF; 
/*overflow-y: hidden; overflow-x: hidden;*/}

.title{ font-size: 60px; }
.title-sub{ font-size: 20px; }
.title, .title-sub { color:#575c74; display:block; width:300px; position:absolute; font-family: 'Segoe Script', georgia, serif; text-align:center; margin-left:-150px; left:50%;}

.wboard{ cursor: crosshair; z-index:10; }
#whiteboard0{ z-index:100; }


.clearBtn, .saveBtn, .preBtn, .nextBtn, .eraseBtn, .brushBtn, .addpicBtn, .shadowBtn, .searchBtn{ display:block; width:30px; height:32px; line-height:30px; background:url(../images/icon.png) no-repeat 0 0; cursor:pointer;  -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; opacity:0.5; }
.saveBtn:hover, .preBtn:hover, .nextBtn:hover, .eraseBtn:hover, .brushBtn:hover, .addpicBtn:hover, .shadowBtn:hover, .clearBtn:hover /*.searchBtn:hover*/{ -webkit-transform: rotate(360deg) scale(0.9); -moz-transform:rotate(360deg) scale(0.9); -ms-transform:rotate(360deg) scale(0.9); -o-transform:rotate(360deg) scale(0.9); transform:rotate(360deg) scale(0.9); opacity:1; }

.brushBtn{ background-position: 0 -160px; }
.eraseBtn{ background-position: 0 -200px; }
.nextBtn{ background-position: 0 -120px; }
.preBtn{ background-position: 0 -80px; }
.saveBtn{ background-position: 0 -40px;}
.addpicBtn{ background-position: 0 -240px; }
.shadowBtn{ background-position: 0 -280px;}
/*.searchBtn{ background-position: 0 -320px;}*/
.searchBtn{ background: none; color: #333; opacity: 1;}

.saveBtn.dis, .preBtn.dis, .nextBtn.dis, .eraseBtn.dis, .brushBtn.dis, .addpicBtn.dis, .shadowBtn.dis, .searchBtn.dis{
opacity:0.2; cursor:default;
}
.saveBtn.dis:hover, .preBtn.dis:hover, .nextBtn.dis:hover, .eraseBtn.dis:hover, .brushBtn.dis:hover, .addpicBtn.dis:hover, .shadowBtn.dis:hover, .searchBtn.dis:hover{ -webkit-transform: rotate(0) scale(1); -moz-transform:rotate(0) scale(1); -ms-transform:rotate(0) scale(1); -o-transform:rotate(0) scale(1); transform:rotate(0) scale(1); }

.saveBtn.sel, .preBtn.sel, .nextBtn.sel, .eraseBtn.sel, .brushBtn.sel, .addpicBtn.sel, .shadowBtn.sel, .searchBtn.sel{ opacity:1; }


.draw_board{ background: url(../../img/draw_bg1.png) center no-repeat #1e2025; height: 290px; padding: 54px 0; position: relative;}
.draw_board .def_txt{ display: block; background: url(../../img/draw_def_txt.png) no-repeat; width: 390px; height: 60px; position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -195px;}
.draw_board ul.buttons{ left:50%; margin-left: -135px; z-index:200; position:absolute; top:0; border:1px solid #ccc; border-top:0; padding:0 5px; width: 270px; background-color:#fff; height: 44px;}
.draw_board ul li{ float: left; display: inline; margin: 7px 10px; line-height:30px; text-align: center;}
.draw_board ul li.line{ background: #ccc; margin: 10px; height: 24px; width: 1px; overflow: hidden;}
.draw_board ul li button{ width: 30px; height: 32px; font-size: 14px; color: #333;}
.draw_board ul li button.clearBtn{ margin-top: 2px;}
.draw_board ul li button.searchBtn{ margin: 5px; background: url(../../img/search_icon.png) 0 0 no-repeat #fff; width: 20px; height: 20px; line-height: 20px;}
.draw_board ul li button.closeBtn{ background: url(../../img/draw_close.png) no-repeat #fff; margin: 5px; width: 17px; height: 20px; line-height: 20px;}


.dragDiv{ display:block; width:419px; height:27px; }
.dragImg{ cursor: move; z-index:1000;}



#slide{
	z-index:0;
}

#shadowImg{ 
	position: absolute;
	/*width: 400px;
	height: 400px;
	max-width: 400px;
	max-height: 400px;
	
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;*/

	width: 750px; 
	height: 290px;
	max-width: 750px;
	max-height: 290px;
	left: 50%;
	top: 50%;
	margin: -145px 0 0 -375px;
}

#loading{
	/*background: url(../../img/loading.gif) no-repeat;*/
	position: absolute;
	/*width: 400px;
	height: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;*/
	width: 58px; 
	height: 10px;
	left: 50%;
	top: 50%;
	margin: 160px 0 0 -29px;
	display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: start;
}


#slide .slides {
	position: absolute;
	/*width: 400px;
	height: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;*/
	width: 750px; 
	height: 290px;
	left: 50%;
	top: 50%;
	margin: -145px 0 0 -375px;
	-webkit-transition: -webkit-perspective .4s ease;
	   -moz-transition: -moz-perspective .4s ease;
	    -ms-transition: -ms-perspective .4s ease;
	     -o-transition: -o-perspective .4s ease;
	        transition: perspective .4s ease;
	
	-webkit-perspective: 750px;
	   -moz-perspective: 750px;
	    -ms-perspective: 750px;
	        perspective: 750px;

 	-webkit-perspective-origin: 50% 25%;
 	   -moz-perspective-origin: 50% 25%;
 	    -ms-perspective-origin: 50% 25%;
 	        perspective-origin: 50% 25%;
}

#slide .slides > canvas{
	display: none;
	position: absolute;
	/*width: 400px;
	min-height: 400px;*/
	width: 750px; 
	min-height: 290px;

    z-index: 10;
	
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	
	-webkit-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	   -moz-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	    -ms-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	     -o-transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
	        transition: all .8s cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#slide .slides > .slide{
    
    /*border-radius: 5px;*/
    /*background-color: #eee;*/
    /*width:478px;*/
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, .1);*/
    /*border: 1px solid rgba(0, 0, 0, .2);*/
	/*width: 400px;*/
	width: 750px; 
    color: #111;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-size: 30px;
    line-height: 36px;

    letter-spacing: -1px;
    word-break:break-all;
}
#slide .slides > canvas.past {
	display: block;
	opacity: 0;
	
	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	   -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#slide .slides > canvas.present {
	display: block;
	z-index: 11;
	opacity: 1;
}
#slide .slides > canvas.future {
	display: block;
	opacity: 0;
	
	-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	    -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	        transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}

/*上下按钮*/
#btn_page_next, #btn_page_prev{ color: #DDD; cursor:pointer; display:block;height:120px;width:80px;position:absolute; z-index:3; }
#btn_page_next:hover, #btn_page_prev:hover{ color: #999; }
#btn_page_prev{left:0;}		 
#btn_page_next{right:0;}
#btn_page_prev span,#btn_page_next span{ display:block; font-size:120px;line-height:160px;width:50px;margin:0 20px 0 20px;}
#btn_page_next span{ text-align:right; }

#dropzone {
	position: absolute;
	/*width: 400px;
	height: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;*/
	width: 750px; 
	height: 290px;
	left: 50%;
	top: 50%;
	margin: -145px 0 0 -375px;

	z-index: 0;
	text-align: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
	color:#EEE;
	font-size:30px;
	font-family: 'Myriad Pro';
}
#dropzone.rounded {
	-webkit-box-shadow: inset 0px 0px 15px #DDD;
	-moz-box-shadow: inset 0px 0px 15px #DDD;
	-o-box-shadow: inset 0px 0px 15px #DDD;
	box-shadow: inset 0px 0px 15px #DDD;
	border: 2px dashed #DDD;
}
#dropImg {
	position: absolute;
	/*width: 400px;
	height: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;*/
	width: 750px; 
	height: 290px;
	left: 50%;
	top: 50%;
	margin: -145px 0 0 -375px;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}



.vbox {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;

  display: box;
  box-orient: vertical;
  box-align: stretch;
}


@-webkit-keyframes BGimgAnim {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.0;
	}
}
#BGimg{
	/*max-width: 400px;
	max-height: 400px;*/
	max-width: 750px; 
	max-height: 290px;
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: BGimgAnim;
	-webkit-animation-duration: 75s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes startLogo {
	0% {
		opacity: 0.0;
	}
	5.66% {
		opacity: 1.0;
	}
	24.53% {
		opacity: 0.6;
	}
	43.39% {
		opacity: 1;
	}
	64.15% {
		opacity: 0.2;
	}
	81.48% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*.logo{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: startLogo;
	-webkit-animation-duration: 5.3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: alternate;
}*/


.imgPreview{
	/*width:1070px;
	height:100px;*/
	padding:5px; 
	z-index:200; 
	position:absolute;  
	bottom: -150px;
	left: 50%;
	margin-left: -535px;
	
}
.imgPreview:hover{
	width:1170px;
	height:200px;
	margin-left: -585px;
}
.imgPreview-inner{
	width:100%;
	height:100%;
	display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: end;
}
.imgPreview .imgsBox{
	position:relative;
	float:left;
	border:1px solid #ccc; 
	margin:0 5px 0 0;
	height:100px;
	width:100px;
	display: block;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	-webkit-transition-property: height,width;
    -webkit-transition-duration: 0.5s,0.5s;
}

.imgPreview .imgsBox p{
	font-size:24px;
	line-height:24px;
	font-family:'Arial';
	font-weight:bold;
	position:absolute;
	top:2px;
	right:5px;
	color:#fff;
}
.imgPreview .imgsBox img{
	cursor:pointer;
	height:100px;
	width:100px;
	-webkit-transition-property: height,width;
    -webkit-transition-duration: 0.5s,0.5s;
}
.imgPreview .imgsBox img:hover,.imgPreview .imgsBox:hover{

	height:200px;
	width:200px;
}



@-webkit-keyframes showImgBox {
	from {
		bottom: -150px;
	}
	to {
		bottom: 0;
	}
}
.showBox{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: showImgBox;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes hideImgBox {
	from {
		bottom: 0;
	}
	to {
		bottom: -150px;
	}
}
.hideBox{
	-webkit-animation-fill-mode: both;
	-webkit-animation-name: hideImgBox;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}